'use client';

import { Card } from "antd";
import { useRouter } from 'next/navigation';
import { ClockCircleOutlined, HistoryOutlined, UserAddOutlined } from '@ant-design/icons';

interface MoodNavigationProps {
  view: string;
  styles: {
    [key: string]: string;
  };
}

export default function MoodNavigation({ view, styles }: MoodNavigationProps) {
  const router = useRouter();

  const handleNavigation = (path: string) => {
    router.push(path);
    router.refresh(); // 强制刷新页面数据
  };

  return (
    <Card 
      bodyStyle={{ padding: '12px 0', display: 'flex', justifyContent: 'center', background: '#fff', borderTopLeftRadius: 12, borderTopRightRadius: 12, borderTop: '1.5px solid #f0f0f0' }} 
      style={{ 
        width: 140, 
        minWidth: 120, 
        borderRadius: 12, 
        background: '#fff', 
        boxShadow: '0 2px 12px rgba(0,0,0,0.08)', 
        border: 'none',
        position: 'relative',
        zIndex: 2
      }}
    >
      <div className={styles.navItems} style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 4, width: '100%' }}>
        <a 
          href="/mood" 
          className={`${styles.navItem} ${view === 'mood' ? styles.active : ''}`}
          onClick={(e) => {
            e.preventDefault();
            handleNavigation('/mood');
          }}
          style={{ display: 'flex', alignItems: 'center', gap: 8, width: '100%', padding: '8px 16px', borderRadius: 8, color: view === 'mood' ? '#1677ff' : '#222', background: 'none', fontWeight: 500, fontSize: 16, justifyContent: 'flex-start' }}
        >
          <ClockCircleOutlined style={{ fontSize: 20, color: view === 'mood' ? '#1677ff' : '#aaa', minWidth: 20, marginRight: 8 }} />
          <span>{'最新'}</span>
        </a>
      {/*  <a
          href="/mood?view=hot" 
          className={`${styles.navItem} ${view === 'hot' ? styles.active : ''}`}
          style={{ display: 'flex', alignItems: 'center', gap: 10, width: '100%', padding: '8px 20px', borderRadius: 8, color: view === 'hot' ? '#1677ff' : '#fff', background: view === 'hot' ? '#23272b' : 'none', fontWeight: 500, fontSize: 16 }}
        >
          <span style={{ fontSize: 20, color: view === 'hot' ? '#1677ff' : '#aaa' }}>🔥</span>
          <span>热门</span>
        </a>*/}
{/*        <a
          href="/mood?view=follow" 
          className={`${styles.navItem} ${view === 'follow' ? styles.active : ''}`}
          style={{ display: 'flex', alignItems: 'center', gap: 10, width: '100%', padding: '8px 20px', borderRadius: 8, color: view === 'follow' ? '#1677ff' : '#fff', background: view === 'follow' ? '#23272b' : 'none', fontWeight: 500, fontSize: 16 }}
        >
          <span style={{ fontSize: 20, color: view === 'follow' ? '#1677ff' : '#aaa' }}>📰</span>
          <span>关注</span>
        </a>*/}
        <a 
          href="/mood?view=friends" 
          className={`${styles.navItem} ${view === 'friends' ? styles.active : ''}`}
          onClick={(e) => {
            e.preventDefault();
            handleNavigation('/mood?view=friends');
          }}
          style={{ display: 'flex', alignItems: 'center', gap: 8, width: '100%', padding: '8px 16px', borderRadius: 8, color: view === 'friends' ? '#1677ff' : '#222', background: 'none', fontWeight: 500, fontSize: 16, justifyContent: 'flex-start' }}
        >
          <UserAddOutlined style={{ fontSize: 20, color: view === 'friends' ? '#1677ff' : '#aaa', minWidth: 20, marginRight: 8 }} />
          <span>{'饭点们'}</span>
        </a>
     {/*   <a
          href="/mood?view=recommend" 
          className={`${styles.navItem} ${view === 'recommend' ? styles.active : ''}`}
          style={{ display: 'flex', alignItems: 'center', gap: 10, width: '100%', padding: '8px 20px', borderRadius: 8, color: view === 'recommend' ? '#1677ff' : '#fff', background: view === 'recommend' ? '#23272b' : 'none', fontWeight: 500, fontSize: 16 }}
        >
          <span style={{ fontSize: 20, color: view === 'recommend' ? '#1677ff' : '#aaa' }}>📌</span>
          <span>推荐圈子</span>
        </a>*/}
      </div>
    </Card>
  );
} 